<template>
  <div>
    <div id="aaa"></div>
    <button @click="preview">打印</button>
    <!-- <button @click="print2">批量打印</button> -->
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      $hiprintTemplate: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 引入后使用示例
      this.$pluginName.init();
      // 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面

      // this.$hiprintTemplate = $hiprintTemplate;
    },
    // 预览
    preview() {
      const array = [
        { name: "张三", age: "12" },
        // { name: "李四", age: "13" },
      ];
      // 想要实现拖拽设计页面,请往下看 '自定义设计'
      const $hiprintTemplate = new this.$pluginName.PrintTemplate({
        template: {
          panels: array.map((item) => this.packageItem(item)),
        },
      });
      $hiprintTemplate.print({});
    },
    packageItem(itemObj) {
      return {
        index: 0,
        name: 1,
        height: 210,
        width: 296.6,
        paperHeader: 49.5,
        paperFooter: 551.5151515151514,
        printElements: [
          {
            options: {
              left: 22.5,
              top: 90,
              height: 225,
              width: 550,
              right: 572.74609375,
              bottom: 315.24609375,
              vCenter: 297.74609375,
              hCenter: 202.74609375,
              columns: [
                [
                  {
                    width: 68.02365828402365,
                    title: "姓名",
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 188.88532396449702,
                    title: itemObj.name,
                    checked: true,
                    columnId: "",
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 94.40363461538465,
                    title: "性别",
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 198.68738313609464,
                    title: itemObj.age,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 2,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                ],
                [
                  {
                    width: 68.02365828402365,
                    title: "序号",
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 188.88532396449702,
                    title: "科目",
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 94.40363461538465,
                    title: "分数",
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 198.68738313609464,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                ],
                [
                  {
                    width: 68.02365828402365,
                    title: "1",
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 188.88532396449702,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 94.40363461538465,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 198.68738313609464,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 2,
                    colspan: 1,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                ],
                [
                  {
                    width: 68.02365828402365,
                    title: "2",
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 188.88532396449702,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 94.40363461538465,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 198.68738313609464,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                    rowStyler: function(value, row, index, options) {
                      console.log(value, row, index, options)
                    }
                  },
                  {
                    width: 100,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                ],
                [
                  {
                    width: 41.210509411031175,
                    title: "3",
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 114.43166417694378,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 57.19218828997586,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 120.37000771695126,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 60.58261265361857,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 71.59763313609469,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                  {
                    width: 84.6153846153846,
                    checked: true,
                    fixed: false,
                    rowspan: 1,
                    colspan: 1,
                  },
                ],
              ],
            },
            printElementType: {
              title: "空白表格",
              type: "table",
              editable: true,
              columnDisplayEditable: true,
              columnDisplayIndexEditable: true,
              columnTitleEditable: true,
              columnResizable: true,
              columnAlignEditable: true,
              isEnableEditField: true,
              isEnableContextMenu: true,
              isEnableInsertRow: true,
              isEnableDeleteRow: true,
              isEnableInsertColumn: true,
              isEnableDeleteColumn: true,
              isEnableMergeCell: true,
            },
          },
        ],
        paperNumberLeft: 565.5,
        paperNumberTop: 573,
        paperNumberContinue: true,
        rotate: true,
        watermarkOptions: {
          content: "vue-plugin-hiprint",
          rotate: 25,
          timestamp: true,
          format: "YYYY-MM-DD HH:mm",
        },
        panelLayoutOptions: {},
      };
    },
    print() {
      //调用其中一种
      //打印11
      this.$hiprintTemplate.print({});
    },
    print2() {
      //直接打印，需要安装客户端
      this.$hiprintTemplate.print2({});
    },
    // 批量打印
    print3() {
      this.$hiprintTemplate.print(this.printData, {});
    },
  },
};
</script>